<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  描述网页各个组成部分之间的关系  -->
<!--
    ParentNode ChildNode firstChild lastChild
    nextSibling  下一兄弟节点
    previousSibling 前一兄弟节点（同父级）
    在一些浏览器中 空格/回车 也算是一个节点
-->
</head>
<body>
    <div>
        <p>段落</p>
        <div id="div1">a</div>
        <a href="#">链接1</a>
    </div>

    <div id="div2">
        b
        <a href="#">链接2</a>
        <p>嘿嘿</p>
    </div>

    <input type="button" value="click" onclick="Dom()">

</body>
<script>
    function Dom() {
        //获取div1对象
        let obj = document.getElementById('div1');
        //div1的父级元素背景
        obj.parentNode.style.background = "blue";
        //div1的上一节点(回车)的上一节点p段落
        obj.previousSibling.previousSibling.style.background = 'red';
        //div1的下一节点(回车)的下一节点p段落
        obj.nextSibling.nextSibling.style.backgroundColor = 'gray';
        //父节点的兄弟节点（回车）的兄弟节点
        obj.parentNode.nextSibling.nextSibling.style.backgroundColor = 'yellow';

        //获取div2对象
        let obj2 = document.getElementById('div2');
        //div2的第一个子节点（回车）的下一个兄弟节点
        obj2.firstChild.nextSibling.style.backgroundColor = 'green';
        //div2的最后一个子节点(回车）的前一个子节点
        obj2.lastChild.previousSibling.style.backgroundColor = 'black';
        //div2的第二个子节点（第一个是回车）
        obj2.childNodes[1].style.backgroundColor = 'pink';
        //div2的子节点长度
        alert(obj2.childNodes.length);
    }
</script>
</html>